<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 头部卡片 -->
      <PageTools :show-before="true">
        <template #before>
          当月审批0,本月审批1,本月驳回0
        </template>
        <template #after>
          <el-button type="primary" @click="$router.push('approvals/addflow')">流程设置</el-button>
        </template>
      </PageTools>
      <!-- 内容表格部分 -->
      <el-card>
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            label="序号"
            width="180"
            type="index"
          />
          <el-table-column
            label="审批类型"
            sortable
            width="180"
            prop="processName"
          />
          <el-table-column
            label="申请人"
            sortable
            width="180"
            prop="username"
          />
          <el-table-column
            label="当前审批人"
            sortable
            width="180"
            prop="procCurrNodeUserName"
          />
          <el-table-column
            label="审批发起时间"
            sortable
            width="180"
          >
            <template #default="{row}">
              {{ row.procApplyTime|formatDate('yyyy-MM-dd hh:mm:ss') }}
            </template>
          </el-table-column>
          <el-table-column
            label="审批状态"
            sortable
            width="180"
          >
            <template #default="{row}">
              <!-- {{ row.processState==='1'?'审核通过':'审核不通过' }} -->
              <span v-if=" row.processState==='1'">🧡审核中</span>
              <span v-if=" row.processState==='2'">💚审核通过</span>
              <span v-if=" row.processState==='3'">💔审核不通过 </span>
              <span v-if=" row.processState==='4'">🤍撤销</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
          >
            <template #default="{row}">
              <el-button type="primary" @click="addExamine(row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 分页组件 -->
      <el-pagination
        :current-page="page.page"
        :page-sizes="[2, 3, 4, 5]"
        :page-size="page.size"
        layout="sizes, prev, pager, next"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getApprovalsLiat } from '@/api/user'
// import { getNowFormatDate } from '@/filters'
export default {
  data() {
    return {
      tableData: [], // 审批列表存放数据
      list: [], // 转成josn对象保存
      page: {
        page: 1, // 页码
        size: 2, // 每页多少数据
        total: 0
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 封装一个获取审批列表的数据
    async getList() {
      const { rows, total } = await getApprovalsLiat(this.page)
      this.tableData = rows
      this.page.total = total
      // rows.forEach(item => {
      //   this.list.push(JSON.parse(item.procData).end_time)
      // })
      // console.log(rows[0])
      // this.list = JSON.parse(rows.procData)
      console.log(this.tableData)
    },
    // 点击查看
    addExamine(data) {
      // console.log(id)
      const name = data.processName
      // console.log(name)
      if (name === '请假') {
        this.$router.push({ path: `approvals/leave/${data.processId}` })
        // return
      } else if (name === '离职') {
        this.$router.push({ path: `approvals/dimission/${data.processId}` })
      } else if (name === '加班') {
        this.$router.push({ path: `approvals/overtime/${data.processId}` })
      }
    },
    // 分页点击
    handleSizeChange(newSize) {
      // console.log(data)
      this.page.size = newSize
      // 重新渲染页面
      this.getList()
    },
    handleCurrentChange(newPage) {
      // console.log(data)
      this.page.page = newPage
      // 重新渲染页面
      this.getList()
    }
  }
}
</script>

<style>

</style>
